<script setup lang="ts">
import {get, put, del, post} from "@/axios"
import {computed, onMounted, reactive, ref, toRaw, nextTick} from "vue"
import DepartmentInter from "@/type/department-inter.ts"
import {ComponentSize, ElMessage} from "element-plus";
import {House, User} from "@element-plus/icons-vue";


const departList = reactive([])
const editOrInsert = ref(false)
const departPanel = ref(false)
const departForm = reactive<DepartmentInter>({})
const departmentList = reactive([])
const departmentDetailsVis = ref(false)
const departmentDetails = ref({
  id: "",
  name: "",
  description: "",
  parent: {},
  children: [],
  posts: [],
})
const activeName = ref()

const ComSize = ref<ComponentSize>('default')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[ComSize.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[ComSize.value] || marginMap.default,
  }
})


const reloadDepartmentList = () => {
  get(`/Department/GetDepartment`).then((res: any) => {
    if (res.status == 200) {
      Object.assign(departList, res.data)
      Object.assign(departmentList, res.data)
    }
  })
}
const indexMethod = (index: number) => {
  return index += 1
}


const addDepartFunc = () => {
  editOrInsert.value = true
  departPanel.value = true
  Object.assign(departForm, {
    id: "",
    name: "",
    description: ""
  })
}
const editDepartFunc = (data: DepartmentInter) => {
  editOrInsert.value = false
  departPanel.value = true
  Object.assign(departForm, data)
}
const deleteDepartFunc = (row: any) => {
  del(`/Department/DeleteDepartment/${row.id}`).then((res: any) => {
    console.log(res)
    if (res.status == 200) {
      reloadDepartmentList()
    }
  })
}

const onSubmit = (type: string) => {
  const depart = toRaw(departForm)
  if (editOrInsert.value) {
    post("/Department/AddDepartment", depart).then((res: any) => {
      if (res.status === 200) {
        departPanel.value = false
        reloadDepartmentList()
      }
    })
  } else {
    put("/Department/UpdateDepartment", depart).then((res: any) => {
      if (res.status === 200) {
        ElMessage.success("修改成功")
        departPanel.value = false
        reloadDepartmentList()
      }
    })
  }
}

onMounted(() => {
  reloadDepartmentList()
  // get("/Department/GetDepartment").then((res: any) => {
  //   console.log("department", res)
  //   if (res.status == 200) {
  //     departmentList.push(...res.data)
  //   }
  // })
})

const checkDepartFunc = async (data: any) => {
  get(`Department/GetDepartmentDetail?id=${data.id}`).then((res: any) => {
    if (res.status === 200) {
      departmentDetails.value.id = data.id
      departmentDetails.value.name = data.name
      departmentDetails.value.description = data.description
      departmentDetails.value.parent = getDepartment(data.parentId)
      departmentDetails.value.posts = res.data.posts
    }
  })
  await nextTick();
  departmentDetailsVis.value = true;
}
const closeDepartmentFunc = () => {
  Object.assign(departmentDetails.value, {})
}

function getDepartment(id: string) {
  if (id != null) {
    return departList.find(item => item.id === id)
  }
}

</script>

<template>
  <div class="depart-list-container">
    <div class="depart-table">
      <div class="title">
        <span>部门列表</span>
        <el-button type="success" @click="addDepartFunc">添加部门</el-button>
      </div>
      <el-scrollbar style="width: 100%;" height="500">
        <el-table
            :indent="20"
            row-key="id"
            :data="departList"
            style="width: 100%"
            :tree-props="{ children: 'childDepartments', hasChildren: 'hasChildren' }"
        >
          <el-table-column label="序号" width="60" type="index" :index="indexMethod"/>
          <el-table-column label="部门名称" width="200">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon>
                  <House/>
                </el-icon>
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="部门描述" width="260"/>
          <el-table-column width="260">
            <template #default="scope">
              <el-button @click="checkDepartFunc(scope.row)">查看</el-button>
              <el-button type="primary" @click="editDepartFunc(scope.row)">编辑</el-button>
              <el-button type="danger" @click="deleteDepartFunc(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </div>
  </div>
  <el-dialog v-model="departPanel"
             :title="editOrInsert? '新增部门':'编辑部门'" width="800">
    <el-form
        label-position="left"
        :model="departForm"
        label-width="auto"
        style="max-width: 600px">
      <el-form-item label="部门名称">
        <el-input v-model="departForm.name"/>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="departForm.description"/>
      </el-form-item>
      <el-form-item label="上级部门">
        <el-select v-model="departForm.parentId" placeholder="选择上级部门">
          <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="departPanel = false ">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <el-dialog
      class="user-details"
      v-model="departmentDetailsVis"
      @close="closeDepartmentFunc"
      title="部门详情"
      width="900"
  >
    <el-descriptions
        style="margin-top: 5px"
        class="margin-top"
        title="部门信息"
        :column="3"
        :size="ComSize"
        border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets/>
            </el-icon>
            部门名称：
          </div>
        </template>
        {{ departmentDetails.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets/>
            </el-icon>
            部门描述：
          </div>
        </template>
        {{ departmentDetails.description }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets/>
            </el-icon>
            部门层级：
          </div>
        </template>
        <el-tag type="primary" v-if="!departmentDetails.parent">{{ departmentDetails.name }}</el-tag>
        <el-tag type="primary" v-if="departmentDetails.parent">{{ departmentDetails.parent.name }}</el-tag>
        <span v-if="departmentDetails.parent">&gt</span>
        <el-tag type="success" v-if="departmentDetails.parent">{{ departmentDetails.name }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item v-if="departmentDetails.posts">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets/>
            </el-icon>
            岗位详情：
          </div>
        </template>
        <div class="posts-info">
          <div class="posts" v-for="post in departmentDetails.posts">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item :name="post.postId">
                <template #title>
                  <el-tag type="success">{{ post.postName }}</el-tag>
                </template>
                <template #default>
                  <div class="user-list" v-if="post.users">
                    <div class="user" v-for="user in post.users" :key="user.id">
                      <p class="username">{{ user.username }}</p>
                    </div>
                  </div>
                </template>
              </el-collapse-item>
            </el-collapse>
          </div>

        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<style scoped>
.depart-list-container {
  width: 100%;
  padding: 30px;
  display: flex;
  justify-content: center;
}

.depart-table {
  width: 1200px;
  background-color: white;
  font-size: 18px;
  padding: 30px;
}

.title {
  font-size: 20px;
  color: #283443;
  margin: 10px 5px;
  display: flex;
  justify-content: space-between;
}
</style>